import {ComponentClass} from 'react'
import Taro, {Component, Config} from '@tarojs/taro'
import {View} from '@tarojs/components'
import {AtDrawer, AtButton} from 'taro-ui'
import { connect } from '@tarojs/redux'
// import { add, minus, asyncAdd } from '../../actions/counter'

import './index.scss'

// #region 书写注意
//
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
//
// #endregion
//
// type PageStateProps = {
//   counter: {
//     num: number
//   }
// }
//
// type PageDispatchProps = {
//   add: () => void
//   dec: () => void
//   asyncAdd: () => any
// }
//
// type PageOwnProps = {}
//
// type PageState = {}
//
// type IProps = PageStateProps & PageDispatchProps & PageOwnProps
//
// interface Index {
//   props: IProps;
// }
//
@connect(({ config }) => ({
  config
}), dispatch => ({ }))

class Index extends Component {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  }

  constructor(props) {
    super(props);
    this.state = {
      show: false
    }
  }


  componentWillReceiveProps() {
    // console.log(this.props, nextProps)
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  handleClick = () => {
    this.setState({
      show: true
    })
  }

  onClose = () => {
    this.setState({
      show: false
    })
  }

  handleItemClick = idx => {
    Taro.navigateTo({
      url: '/pages/about/index'
    })
  }

  render() {
    const {show} = this.state
    const { config: { menu = [] } } = this.props
    console.log(menu)
    return (
      <View className='index'>
        <AtButton onClick={this.handleClick}>打开</AtButton>
        <AtDrawer
          show={show}
          mask
          onClose={this.onClose}
          items={menu.map(m => m.name)}
          onItemClick={this.handleItemClick}
        ></AtDrawer>
      </View>
    )
  }
}

// #region 导出注意
//
// 经过上面的声明后需要将导出的 Taro.Component 子类修改为子类本身的 props 属性
// 这样在使用这个子类时 Ts 才不会提示缺少 JSX 类型参数错误
//
// #endregion

export default Index as ComponentClass<PageOwnProps, PageState>
